<template>
	<view class="all">
		<!-- <view class="img_div">
			<text class="img_div_title">基础用法</text>
			<view class="img_div01">
				<view class="img_div01_list">
					<c-image src="/static/images/cat.jpeg" mode="fill" width="200" height="200"></c-image> 
					<text>fill</text>
				</view>
			</view>
		</view> -->
		<view class="img_div">
			<text class="img_div_title">懒加载模式</text>
			<view class="img_div01">
				<view class="img_div01_list">
					<c-image src="http://node.chenyuxing.top/uploads/detail_img/00125a09a8ae394fc77d5d2bdf34f534" lazy-load mode="none" width="690" height="2000"></c-image> 
					<text>contain</text>
				</view>
				<!-- <view class="img_div01_list">
					<c-image src="/static/images/cat.jpeg" mode="cover" width="200" height="200"></c-image> 
					<text>cover</text>
				</view>
				<view class="img_div01_list">
					<c-image src="/static/images/cat.jpeg" mode="fill" width="200" height="200"></c-image> 
					<text>fill</text>
				</view> -->
			</view>
		</view>
		<!-- <view class="img_div">
			<text class="img_div_title">填充模式</text>
			<view class="img_div01">
				<view class="img_div01_list">
					<c-image src="/static/images/cat.jpeg" mode="contain" width="200" height="200"></c-image> 
					<text>contain</text>
				</view>
				<view class="img_div01_list">
					<c-image src="/static/images/cat.jpeg" mode="cover" width="200" height="200"></c-image> 
					<text>cover</text>
				</view>
				<view class="img_div01_list">
					<c-image src="/static/images/cat.jpeg" mode="fill" width="200" height="200"></c-image> 
					<text>fill</text>
				</view>
			</view>
			<view class="img_div01">
				<view class="img_div01_list">
					<c-image src="/static/images/cat.jpeg" mode="center" width="200" height="200"></c-image> 
					<text>center</text>
				</view>
				<view class="img_div01_list">
					<c-image src="/static/images/cat.jpeg" mode="top" width="200" height="200"></c-image> 
					<text>top</text>
				</view>
				<view class="img_div01_list">
					<c-image src="/static/images/cat.jpeg" mode="bottom" width="200" height="200"></c-image> 
					<text>bottom</text>
				</view>
			</view>
			<view class="img_div01">
				<view class="img_div01_list">
					<c-image src="/static/images/cat.jpeg" mode="left" width="200" height="200"></c-image> 
					<text>left</text>
				</view>
				<view class="img_div01_list">
					<c-image src="/static/images/cat.jpeg" mode="right" width="200" height="200"></c-image> 
					<text>right</text>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
</script>

<style>
	.all{
		width: 690rpx;
		margin: auto;
	}
	.img_div{
		display: flex;
		flex-direction: column;
		margin-bottom: 50rpx;
	}
	.img_div_title{
		margin-bottom: 50rpx;
		font-size: 30rpx;
	}
	.img_div01{
		display: flex;
		justify-content: space-between;
	}
	.img_div01_list{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}
	.img_div01_list text{
		font-size: 28rpx;
		margin-top: 30rpx;
	}
</style>
